const transitionStyle = '.3s width ease-in-out'
const Transition = {
  beforeEnter(el) {
    el.style.width = '0'
    el.style.overflow = 'hidden'
  },

  enter(el) {
    el.style.width = '0'
  },

  afterEnter(el) {
    el.style.transition = transitionStyle
    el.style.width = '200px'
  },

  beforeLeave(el) {
    el.style.transition = transitionStyle
    if (!el.dataset) el.dataset = {}
    el.style.width = '0'
  },

  leave(el) {
    el.style.width = 0
  },

  afterLeave(el) {
    el.style.transition = ''
    el.style.width = '0'
  }
}
export default {
  name: 'CollapseTransition',
  functional: true,
  render(h, { children }) {
    const data = {
      on: Transition
    }

    return h('transition', data, children)
  }
}
